<template>
  <Card style="width: 100%;" title="硬件资源">
    <Form name="user" ref="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <Row>
        <Col :span="8">
          <FormItem name="resourceName" label="资源名称">
            <Input placeholder="请输入资源名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="resourceType" label="资源类型">
            <Select placeholder="资源类型" style="width: 100%">
              <Option label="物理机" value="成都" />
              <Option label="虚拟机" value="虚拟机" />
              <Option label="容器" value="容器" />
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="groupName" label="厂商名称">
            <Input placeholder="请输入用例代码" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="8">
          <FormItem name="resourceIp" label="IP地址">
            <InputSearch
              placeholder="请输入"
              style="width: 100%"
              @search="onSearch"
            />
          </FormItem>
        </Col>
        <Col :span="5" :offset="11">
          <Button type="primary" style="margin-right: 10px" size="md"
            >查询</Button
          >
          <Button type="primary" style="margin-right: 10px" size="md"
            >重置</Button
          >
          <a href="#" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></a>
        </Col>
      </Row>
    </Form>
    <div style="width: 100%;height: 2px; background-color: #E9EBF0;margin: 20px 0"></div>
    <Button type="primary" style="margin-right: 10px;margin-bottom: 20px;" size="md"
            ><Icon name="add"/> 新增</Button
          >
    <Table
      :columns="columns3"
      :dataSource="data"
      :bordered="false"
      @change="handleTableChange"
      :pagination="{
        total: data.length,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSize,
        current,
      }"
    >
      <template #paginationTotal="props">
        <span>总共{{ props.total }} 条</span>
      </template>
    </Table>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 12,
      },
      data: [
        {
          id: "1",
          resourceName: "物理机01",
          resourceNumber: "202201031",
          resourceType: "物理机",
          resourceIp: "192.168.33.18",
          status: true,
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "2",
          resourceName: "物理机01",
          resourceNumber: "202201031",
          resourceType: "物理机",
          resourceIp: "192.168.33.18",
          status: true,
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "3",
          resourceName: "物理机01",
          resourceNumber: "202201031",
          resourceType: "物理机",
          resourceIp: "192.168.33.18",
          status: true,
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          resourceName: "物理机01",
          resourceNumber: "202201031",
          resourceType: "物理机",
          resourceIp: "192.168.33.18",
          status: true,
          joinTime: "2017-10-31 12:13:00",
        },
      ],
      columns3: [
        { title: "序号", dataIndex: "id", key: "id" },
        { title: "资源名称", dataIndex: "resourceName", key: "resourceName" },
        {
          title: "资源编号",
          dataIndex: "resourceNumber",
          key: "resourceNumber",
        },
        { title: "资源类型", dataIndex: "resourceType", key: "resourceType" },
        { title: "IP地址", dataIndex: "resourceIp", key: "resourceIp" },
        { title: "空闲状态", dataIndex: "status", key: "status" },
        { title: "入库时间", dataIndex: "joinTime", key: "joinTime" },
      ],
      current: 1,
      pageSize: 5,
    };
  },
  methods: {
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.current = current;
      this.pageSize = pageSize;
      console.log("===>>>>filters", p, filters);
    },
    onSearch(value, e) {
      console.log("value", value, e);
    },
  },
};
</script>


